<template>
    <div class="page-main couple">
        <div class="loves-main couple-main">
            <div class="text">请输入以下信息</div>
            <div class="form-box">
                <div class="ipt">
                    <span>男方姓</span>
                    <input type="text" placeholder="请输入男方姓" v-model="familyName1" @keyup.enter="search">
                </div>
                <div class="ipt">
                    <span>男方名</span>
                    <input type="text" placeholder="请输入男方名" v-model="name1" @keyup.enter="search">
                </div>
                <div class="line"></div>
                <div class="ipt">
                    <span>女方姓</span>
                    <input type="text" placeholder="请输入女方姓" v-model="familyName2" @keyup.enter="search">
                </div>
                <div class="ipt">
                    <span>女方名</span>
                    <input type="text" placeholder="请输入女方名" v-model="name2" @keyup.enter="search">
                </div>
                <div class="line"></div>
                <div class="ipt ipt-date">
                    <span>登记结婚日期</span>
                    <a-date-picker @change="onDateChange" :inputReadOnly="true" ref="datePicker">
                        <input type="text" placeholder="请输入登记结婚日期" v-model="createDate" @keyup.enter="search">
                    </a-date-picker>
                </div>
            </div>
            <a href="javascript:" class="search" @click="search">查询</a>
        </div>
        <div class="btm">
            <div class="logo"></div>
            <div class="tit">上海传承家谱家训服务平台</div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                familyName1 : '',
                name1       : '',
                familyName2 : '',
                name2       : '',
                createDate  : null,
                dateFormat  : 'YYYY-MM-DD',
            }
        },
        computed:{
            isNotEmpty(){ // 判断各个姓名是否为空
                return this.notEmpty(this.familyName1, '男方姓不能为空！') || 
                       this.notEmpty(this.name1, '男方名不能为空！')       || 
                       this.notEmpty(this.familyName2, '女方姓不能为空！') || 
                       this.notEmpty(this.name2, '女方名不能为空！')       || 
                       this.notEmpty(this.createDate, '登记结婚日期不能为空！')
            }
        },
        mounted(){
            // console.log(this.plus);
            this.createDate = this.$moment().format(this.dateFormat);
        },
        methods:{
            search(){
                if( this.isNotEmpty ) return;
                let tipsCoupleParams = {
                    familyName1 : this.familyName1.trim(),
                    name1       : this.name1.trim(),
                    familyName2 : this.familyName2.trim(),
                    name2       : this.name2.trim(),
                    createDate  : this.createDate,
                };
                // localStorage.tipsCoupleParams = JSON.stringify(tipsCoupleParams);
                this.$router.push({ path:"/coupleResult", query: { 
                    // tipsCoupleParams: encodeURIComponent(JSON.stringify(tipsCoupleParams)), 
                    tipsCoupleParams: JSON.stringify(tipsCoupleParams), 
                } })
                // this.$router.push('/coupleResult')
            },
            onDateChange(date, dateString){
                // console.log(date, dateString);
                this.createDate = dateString;
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/.ant-calendar-picker{
        width: auto!important;
        // flex-shrink: initial!important;
        // input{
        //     width: inherit!important;
        // }
    }
	
	/deep/.search{
		position: relative;
		z-index: 666;
	}
</style>
